<template>
  <div class="code-drawer">
    <div class="code-but-operation">
      <el-button type="primary" icon="el-icon-plus el-icon--left" @click="addBut">添加选项</el-button>
      <el-button type="success" icon="el-icon-refresh-left el-icon--left" @click="validateApi">验证api</el-button>
    </div>
    <ul class="mt-12">
      <li v-for="(item,key) in errArray" :key="key" class="mt-8">{{ item }}</li>
    </ul>
    <draggable v-model="propsData.optionProp.optionArray">
      <ul class="code-but-array" v-for="(item,key) in propsData.optionProp.optionArray" :key="key">
        <li>
          <span>字段注释 {{ key + 1 }}</span>
          <el-input v-model="item.notes" placeholder="字段注释" clearable></el-input>
        </li>
        <li>
          <span>字段名称 {{ key + 1 }}</span>
          <el-input v-model="item.field" placeholder="字段注释" clearable></el-input>
        </li>
        <li>
          <span>是否是api {{ key + 1 }}</span>
          <el-select v-model="item.isApi" placeholder="数据类型" class="inpu90">
            <el-option
                v-for="item in $store.state.booleanOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <el-collapse v-model="item.contentArrayActive">
            <el-collapse-item :title="`选项配置 ${ key + 1 }`" name="1" class="code-option-collapse" v-if="!item.isApi">
              <div class="code-but-operation mb-12">
                <span class="s">数据解析</span>
                <el-input v-model="item.dataParsing" placeholder="数据格式 status;//审批状态:1待审批/2不通过/3通过" clearable class="code-option-1"></el-input>
                <el-button type="primary" @click="startParsingClick(key)">开始解析</el-button>
              </div>
              <el-button type="primary" class="ml-12" icon="el-icon-plus el-icon--left" @click="addOptionConfiguration(key)">添加选项配置</el-button>
              <ul class="code-option-css">
                <li v-for="(item2,key2) in item.contentArray" :key="key2">
                  <span>label</span>
                  <el-input v-model="item2.label" placeholder="label"></el-input>
                  <span>value</span>
                  <el-input v-model="item2.value" placeholder="value"></el-input>
                  <el-button type="danger" @click="delOptionConfiguration(key,key2)" class="ml-12">删除</el-button>
                </li>
              </ul>
            </el-collapse-item>
            <el-collapse-item :title="`api配置 ${ key + 1 }`" name="1" class="code-option-collapse" v-else>
              <ul class="code-option-api-css">
                <li>
                  <label>选择api</label>
                  <el-select v-model="item.choiceApi" placeholder="选择api" style="width: 250px">
                    <el-option
                        v-for="item in propsData.apiProp.apiArray"
                        :key="item.name"
                        :label="item.notes"
                        :value="item.name">
                    </el-option>
                  </el-select>
                  <label>接口参数</label>
                  <el-input v-model="item.params" placeholder="接口参数 {aa:cc}" style="width: 250px" clearable></el-input>
                </li>
                <li>
                  <label>label字段</label>
                  <el-input v-model="item.label" placeholder="label字段" clearable></el-input>
                  <label>value字段</label>
                  <el-input v-model="item.value" placeholder="value字段" clearable></el-input>
                </li>
              </ul>
            </el-collapse-item>
          </el-collapse>
        </li>
        <li class="del">
          <el-button type="warning" @click="delBut(key)">删除选项</el-button>
        </li>
      </ul>
    </draggable>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['propsData'],
  data() {
    return {
      //错误数组
      errArray: []
    };
  },
  mounted() {
  },
  methods: {
    //验证api
    validateApi() {
      this.errArray = [];
      let forData = this.propsData.optionProp.optionArray;
      for (let i = 0; i < forData.length; i++) {
        let errString = ``;
        if (!forData[i].notes) {
          errString += `字段注释${i + 1} `
        }
        if (!forData[i].field) {
          errString += `字段名称${i + 1} `
        }
        if(forData[i].isApi){
          if (!forData[i].choiceApi) {
            errString += `api配置${i + 1}--选择api `
          }
          if (!forData[i].label) {
            errString += `api配置${i + 1}--label字段 `
          }
          if (!forData[i].value) {
            errString += `api配置${i + 1}--value字段 `
          }
        }
        if (errString) {
          this.errArray.push(errString)
        }
      }
      if (!this.errArray.length) {
        this.$message.success('验证完成，没有错误')
      }
    },
    //添加选项
    addBut() {
      let jsonData = {
        notes: '',//字段注释
        field: '',//字段名称
        isApi: false,//是否是api true是
        //不是api的话内容是说明
        contentArray: [
          {
            label: '',
            value: '',
          }
        ],
        dataParsing: '',//解析的数据
        contentArrayActive: ['1'],//折叠固定打开1
        //是api后面才有用
        choiceApi: '',//选择api
        params: '',//接口参数
        label: '',//是api的label字段
        value: '',//是api的value字段
      }
      this.propsData.optionProp.optionArray.push(jsonData);
    },
    //删除选项
    delBut(key) {
      this.propsData.optionProp.optionArray.splice(key, 1);
    },
    //开始解析 选项
    startParsingClick(key) {
      if (this.propsData.optionProp.optionArray[key].dataParsing) {
        let dataParsing = this.propsData.optionProp.optionArray[key].dataParsing.split(':');
        console.log(dataParsing)

        //注释和字段名称
        let data = dataParsing[0].trim().split(';//');
        this.propsData.optionProp.optionArray[key].notes = data[1] + '选项';//注释
        this.propsData.optionProp.optionArray[key].field = data[0] + 'Options';//字段名称

        //label value 赋值
        let tabsArrayData = dataParsing[1];
        let tabsArrayDataArray = tabsArrayData.split('/');
        for (let i = 0; i < tabsArrayDataArray.length; i++) {
          let jsonData = {}
          let str = tabsArrayDataArray[i];
          jsonData.value = str.replace(/\D/g, "");
          let indexs = str.indexOf(str.replace(/\D/g, ""));
          let resolves = str.substring(indexs + 1, str.length);
          jsonData.label = resolves;
          this.propsData.optionProp.optionArray[key].contentArray.push(jsonData);
        }
      }
    },
    //添加选项配置
    addOptionConfiguration(key) {
      let jsonData = {
        label: '',
        value: ''
      }
      this.propsData.optionProp.optionArray[key].contentArray.push(jsonData);
    },
    //删除选项配置
    delOptionConfiguration(key, key2) {
      this.propsData.optionProp.optionArray[key].contentArray.splice(key2, 1);
    },
  },
};
</script>

<style lang="scss" scoped></style>
